Applying your company logo to the header

Description

Now you have an idea of where everything is located, changing other variables such as font and images is much easier. Firstly, you will want to personalise your library to your company and a great way to do so is to change the logo in the header to your company's.

There are two ways in which you can change the logo; the first is the easiest, the second is more complex and time consuming.

NOTE: If your company logo does not have a ‘.png’ extension, go to Method 2 and follow those steps

Steps

Method 1

1. Locate the images sub-folder within your theme folder.
2. Open the images folder.
3. Within the images folder there is an image named logo.png.



Contents of the images folder
4. Replace the current logo.png with your company’s logo.
5. Open the mobile subfolder and replace the current ‘logo.png’ with your company’s logo.



Contents of the mobile images folder
6. Proceed with the steps outlined in Uploading your new theme to your website.

Method 2

1. Locate the images sub-folder within your theme folder
2. Save your company logo within the folder (avoid using mixed case names as some webservers do not allow such values).



Contents of the images folder with the logo file
3. Open the mobile subfolder and save your company logo within the folder (avoid using mixed case names as some webservers do not allow such values).



Contents of the mobile images folder with the logo file
4. Locate header.html
5. Right Click and select Edit with Notepad++ or Open with Notepad.
6. Locate the code that defines where the logo is set and change the src value located next to the img tag to the same as your logo image you saved in the file.



img tag
7. Save and close the file.
8. Locate client_temp.css.
9. Right Click and selct Edit with Notepad++ or Open with Notepad.
10. Press CTRL + F and type .nav-logo and press Enter
11. Within the value of background change the value after mobile/ to your company’s logo name.



.nav-logo code
12. Save and close the file
13. Proceed with the steps outlined in Uploading your new theme to your website